.styles {
    height: 500px;
    border: 1px solid gray;
}

.container {
    height: 500px;
    border: 1px solid red;
}

.center-vertical {
    position: relative;
    top: 50%;
    transform: translateY(40%);
}

.end_show {
    height: 300px;
}

.speaking_show {

    height: 150px;

}

.nihao {
    border: 1px black solid;
}

.right_speaking {
    height: 310px;
    overflow: auto;
}

.send_main{
    border: 1px  #5bc0de solid;
    font-size: 16px;
    background-color: #5bc0de;
    float: right;
}
.triangle_left{
    float: left;
    margin-top: 5px;
    /*position:relative;*/
    border-color: transparent limegreen transparent transparent;
}
.triangle_left,.triangle_right{
    width: 0px;
    height: 0px;
    border-width: 7px;
    border-style: solid;
}
.triangle_right{
    float: right;
    margin-top: 5px;
    border-color: transparent transparent transparent  #5bc0de;
}
.receive_main{

    border: 1px limegreen solid;
    font-size: 16px;
    background-color: limegreen;
    float: left;
    height: auto;

}
.send_main, .receive_main {
    border-radius:7px;
    word-break: break-all;
    word-wrap: break-word;
    /*background-color: white;*/
    width: 310px;

}